<template>
	<view :class="pageClass">
		<view class=" flex " @click="$emit('click')" hover-class="bg-hover-light">
			<view class="flex-a-j py-2 ml-3 flex-row" v-if="showLeftIcon">
				<slot name="icon"></slot>
				<image v-if="cover" :style="coverStyle" :src="cover"></image>
				
			</view>
			
			<view class="flex-a-j ml-3 py-2 pr-3 flex-1 justify-between" :class="borderBottom?'border-bottom':''">
				<slot>
					<text class="font-md text-dark flex-a-j flex-shrink">{{title}}</text>
				</slot>
				<view v-if="showRight" class="flex-a-j flex-row">
					<slot name="right"></slot>
					<!-- 右边 -->
					<text v-if="showRightIcon" class="iconfont text-light-muted font-md px-1 ">&#xe60c;</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			cover:{
				type:String,
				default:""
			},
			//封面大小
			coverSize:{
				type:[String,Number],
				default:"75"
			},
			title:{
				type:String,
				default:""
			},
			pageClass:{
				type:String,
				default:"bg-white"
			},
			//显示右箭头
			showRight:{
				type:Boolean,
				default:false
			},
			//显示底部线
			borderBottom:{
				type:Boolean,
				default:true
			},
			//显示左边图标
			showLeftIcon:{
				type:Boolean,
				default:true
			},
			//显示右边图标
			showRightIcon:{
				type:Boolean,
				default:true
			},
		},
		computed:{
			coverStyle(){
				return `width: ${this.coverSize}rpx;height: ${this.coverSize}rpx;`
			}
		}
	}
</script>

<style>
</style>
